<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="courseId" placeholder="Please input" style="width: 300px;" class="filter-item" />
      <el-button style="width: 100px" class="filter-item" type="primary" icon="el-icon-search"  @click="searchSG(courseId)" >Search</el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
      >Add</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="ID" width="80">
        <template slot-scope="scope">{{ scope.row.courseId }}</template>
      </el-table-column>

      <el-table-column label="CourseCode" width="150">
        <template slot-scope="scope">{{ scope.row.courseCode }}</template>
      </el-table-column>

      <el-table-column label="CourseName" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.courseName }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="StudentID" width="150">
        <template slot-scope="scope">
          {{ scope.row.studentId }}
        </template>
      </el-table-column>

      <el-table-column label="StudentName" width="120">
        <template slot-scope="scope">{{ scope.row.studentName }}</template>
      </el-table-column>

      <el-table-column label="UsualSorce" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.usualSorce }}</template>
      </el-table-column>

      <el-table-column label="FinalSorce" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.finalSorce }}
        </template>
      </el-table-column>

      <el-table-column label="TotalSorce" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.totalSorce }}</template>
      </el-table-column>

      <el-table-column
        label="Actions"
        align="center"
        width="300"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editSG(scope.row) ">Edit</el-button>

          <el-button size="mini" type="danger" @click="deleteSG(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from "@/api/grade/studentGradeTable";
import { delTableRow } from "../../../api/grade/studentGradeTable";
import { searchList } from "../../../api/grade/studentGradeTable";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: [
        {
          courseId: 1,
          dateCreated: 1592199862382,
          dateModified: 1592199862382,
          deleted: null,
          entityName: null,
          department: null,
          name: "name1",
          workid: 1,
          sex: "sex1",
          age: 1,
          departmentCode: "departmentcode1",
          teachtitle: "teachtitle1"
        }
      ],
      name:'',
     courseId:''
    }
  },
  created() {
    this.fetchData();
  },
  handleModifyStatus(row, status) {
    this.$message({
      message: "Success",
      type: "success"
    });
    row.status = status;
  },
  handleFilter() {
    this.listQuery.page = 1;
    this.getList();
  },
  handleDelete(row, index) {
    this.$notify({
      title: "Success",
      message: "Delete Successfully",
      type: "success",
      duration: 2000
    });
    this.list.splice(index, 1);
  },
  handleUpdate(row) {
    this.temp = Object.assign({}, row); // copy obj
    this.temp.timestamp = new Date(this.temp.timestamp);
    this.dialogStatus = "update";
    this.dialogFormVisible = true;
    this.$nextTick(() => {
      this.$refs["dataForm"].clearValidate();
    });
  },
  methods: {
      searchSG(courseId){
        var vm = this;
        //console.log(typeof (courseId));
          searchList(undefined, Number(courseId)).then(res => {
            console.log(res);
            vm.list = [];
            var a = vm.list.push(JSON.parse(res));
          //vm.list = res;
           console.log(a);
           console.log(this.list)
        })
      },
    editSG(row) {
      this.$router.push("/editStudentGrade/index?row.courseId");
    },
    deleteSG(idx,row){
          console.log("索引",idx);
          console.log("数据", row.courseId);
      delTableRow(row.courseId).then((res) => {
        console.log(res)
      })
      alert("删除成功！");
      },
    fetchData() {
      var vm = this;
      getList().then(res => {
        console.log(res.content);
        vm.list = res.content;
      });
      // var vm=this;
      // this.axios({
      // method:"GET",
      // url:'http://localhost:8084/course-web/courseGrade/.jsonp?page=1&limit=100'
      // }).then(function(resp){
      // vm.list=resp.data
      // });
    }
  }
};
</script>
